.app-wrapper {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-left: var(--ef-layout-sidebar-width);
  transition: padding-left 0.3s ease;
}
.el-menu-item,
.el-sub-menu > .el-sub-menu__title {
  &:hover {
    background-color: var(--ef-menu-bg-hover-color) !important;
  }
}
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: var(--ef-layout-sidebar-width);
  height: 100%;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 35%);
  transition: width 0.3s ease;
  .logo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--ef-layout-header-height);
    color: #ddd;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    dt {
      display: none;
      font-size: 16px;
    }
    dd {
      font-size: 22px;
    }
  }
  .el-scrollbar {
    height: calc(100% - var(--ef-layout-header-height));
    &__wrap {
      overflow-x: hidden;
    }
  }
  &.nologo {
    .logo {
      display: none;
    }
    .el-scrollbar {
      height: 100%;
    }
  }
  .el-menu {
    border-right: none;
    .el-sub-menu .el-menu-item,
    .el-sub-menu .el-sub-menu > .el-sub-menu__title {
      background-color: var(--ef-submenu-bg-color) !important;
      &:hover {
        background-color: var(--ef-submenu-hover-color) !important;
      }
    }
    .is-active > .el-sub-menu__title {
      color: var(--ef-submenu-text-active-color) !important;
    }
  }
  .el-menu--collapse {
    .is-active > .el-sub-menu__title {
      color: var(--el-menu-active-color) !important;
    }
  }
}
.app-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--ef-layout-header-height);
  padding: 0 15px;
  border-bottom: 1px solid #eee;
  .logo {
    margin-right: 20px;
    color: #ddd;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    dt {
      display: none;
    }
    dd {
      font-size: 22px;
    }
  }
  .sidebar-btn {
    height: 24px;
    margin-right: 20px;
    font-size: 24px;
    line-height: 24px;
    cursor: pointer;
  }
  .el-menu--horizontal {
    display: flex;
    flex: 1;
    height: auto;
    border-bottom: none;
    .el-menu-item,
    .el-sub-menu__title {
      height: 58px;
      padding: 0 10px;
      line-height: 58px;
    }
    .el-menu-item.is-active,
    .el-sub-menu.is-active .el-sub-menu__title {
      background-color: var(--ef-submenu-bg-color) !important;
      border-bottom-color: transparent;
    }
    .el-sub-menu__icon-arrow {
      display: none;
    }
  }
  .right-box {
    display: flex;
    align-items: center;
    margin-left: auto;
    .right-menu-item {
      padding: 0 8px;
      margin-right: 10px;
      font-size: 18px;
      color: #666;
      cursor: pointer;
    }
    .avatar-container {
      .avatar-wrapper {
        position: relative;
        .user-avatar {
          width: 42px;
          height: 42px;
          border-radius: 10px;
        }
        .el-icon-caret-bottom {
          position: absolute;
          top: 25px;
          right: -20px;
          font-size: 12px;
        }
      }
    }
  }
}
.app-main {
  position: relative;
  box-sizing: border-box;
}
.app-main-view {
  min-height: calc(100vh - var(--ef-layout-header-height) - var(--ef-layout-copyright-height));
  overflow-x: hidden;
}
.app-main-copyright {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--ef-layout-copyright-height);
  color: #999;
  background: #fff;
  border-top: 1px solid #e4e7ed;
  box-shadow: 0 1px 4px 0 rgba(193, 193, 193, 50%);
  a {
    color: #999;
  }
  a:hover {
    color: #333;
  }
}
.app-has-headerTab {
  .app-main-view {
    min-height: calc(100vh - var(--ef-layout-header-height) - var(--ef-layout-tabbar-height) - var(--ef-layout-copyright-height));
  }
}
.app-header-fixed {
  .app-main {
    height: 100%;
    padding-top: var(--ef-layout-header-height);
    padding-bottom: var(--ef-layout-copyright-height);
  }
  .app-main-view {
    height: 100%;
    overflow-y: auto;
  }
  .app-main-copyright,
  .app-header-box {
    position: fixed;
    z-index: 9;
    width: calc(100% - var(--ef-layout-sidebar-width));
    transition: width 0.28s;
  }
  .app-main-copyright {
    bottom: 0;
  }
  .app-header-box {
    top: 0;
  }
  &.app-has-headerTab {
    .app-main {
      padding-top: calc(var(--ef-layout-header-height) + var(--ef-layout-tabbar-height));
    }
  }
}
.app-sidebar-collapse {
  padding-left: var(--ef-layout-sidebar-collapse-width);
  .app-sidebar {
    width: var(--ef-layout-sidebar-collapse-width);
    .logo {
      dd {
        display: none;
      }
      dt {
        display: block;
      }
    }
  }
  &.app-header-fixed {
    .app-main-copyright,
    .app-header-box {
      width: calc(100% - var(--ef-layout-sidebar-collapse-width));
    }
  }
}
.app-tabbar {
  height: var(--ef-layout-tabbar-height);
  background-color: #fff;
  box-shadow: 0 1px 4px 0 rgba(193, 193, 193, 50%);
  &-inner {
    display: flex;
    justify-content: space-between;
    height: 100%;
  }
  &-icon {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ef-layout-tabbar-height);
    height: 100%;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    &:hover {
      background-color: #f5f5f5;
    }
    &.gray {
      color: #bbb;
      cursor: not-allowed;
      &:hover {
        background-color: initial;
      }
    }
  }
  &-tool {
    display: flex;
    align-items: center;
    .app-tabbar-icon {
      border-left: 1px solid #f2f2f2;
    }
  }
  &-main {
    position: relative;
    flex: 1;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    border-right: 1px solid #f2f2f2;
    border-left: 1px solid #f2f2f2;
  }
  &-content {
    position: absolute;
    display: flex;
    transition: all 0.3s ease;
  }
  &-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 2px;
    color: #555;

    $real-height: calc(var(--ef-layout-tabbar-height) - 2px);
    $close-icon-size: 14px;
    &::before,
    &::after {
      width: 14px;
      height: $real-height;
      content: '';
    }
    .item-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      height: $real-height;
      padding: 0 calc($close-icon-size / 2);
      transition: padding var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
    }
    .icon-close {
      width: 0;
      height: $close-icon-size;
      margin-left: 4px;
      overflow: hidden;
      font-size: 12px;
      text-align: center;
      border-radius: 50%;
      transition: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
      transform-origin: center center;
      &:hover {
        color: #fff;
        background-color: #bbb;
      }
    }
    &:hover,
    &.cur {
      .item-inner:has(.icon-close) {
        padding: 0;
      }
      .icon-close {
        width: $close-icon-size;
      }
    }
    &.cur {
      color: #333;
      background-color: #fff;
      .item-inner {
        background: url('../images/tab-bg-cur.png') repeat-x;
      }
      &::before {
        width: 24px;
        background: url('../images/tab-bg-cur-left.png') no-repeat;
        background-size: cover;
      }
      &::after {
        width: 24px;
        background: url('../images/tab-bg-cur-right.png') no-repeat;
        background-size: cover;
      }
    }
  }
}
.main-maximize {
  .app-sidebar,
  .app-header-box,
  .app-main-copyright {
    display: none !important;
  }
  .app-wrapper {
    padding: 0 !important;
  }
  .app-main {
    padding: 0 !important;
  }
}
